<template>
    <div>
        <div style="margin: 10px 5px">
            <el-button type="primary" @click="add()">新增</el-button>
            <el-button type="">其它</el-button>
        </div>
        <!--搜索框-->
        <div style="margin: 10px 5px">
            <el-input v-model="search" style="width: 30%" placeholder="请输入关键字"/>
            <el-button type="primary" style="margin-left: 5px" @click="list()">查找</el-button>
        </div>
        <el-table :data="tableData" stripe style="width: 100%">
            <!--sortable属性支持排序-->
            <el-table-column prop="id" sortable label="id"/>
            <el-table-column prop="name" label="家居名"/>
            <el-table-column prop="maker" label="生产商"/>
            <el-table-column prop="price" sortable label="价格"/>
            <el-table-column prop="sales" sortable label="销量"/>
            <el-table-column prop="stock" sortable label="库存"/>
            <el-table-column label="操作">
                <template #default="scope">
                    <!--scope.row可以保存本行的数据-->
                    <el-button link type="text" @click="reShow(scope.row)">编辑</el-button>
                    <el-popconfirm title="是否确认删除?" @confirm="del(scope.row.id)">
                        <template #reference>
                            <el-button type="danger" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!--增加家居的对话框-->
        <el-dialog
                v-model="dialogVisible"
                :title="dialogTitle"
                width="500"
        >
            <el-form :model="form" :rules="rules" ref="form" label-width="auto" style="max-width: 600px">
                <el-form-item label="家具名" prop="name">
                    <el-input v-model="form.name" style="width: 50%"/>
                    {{ errors.name }}
                </el-form-item>
                <el-form-item label="生产商" prop="maker">
                    <el-input v-model="form.maker" style="width: 50%"/>
                    {{ errors.maker }}
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input v-model="form.price" style="width: 50%"/>
                    {{ errors.price }}
                </el-form-item>
                <el-form-item label="销量" prop="sales">
                    <el-input v-model="form.sales" style="width: 50%"/>
                    {{ errors.sales }}
                </el-form-item>
                <el-form-item label="库存" prop="stock">
                    <el-input v-model="form.stock" style="width: 50%"/>
                    {{ errors.stock }}
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit()">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!--页码-->
        <div class="demo-pagination-block" style="margin-left: 100px;margin-top: 10px">
            <el-pagination
                    v-model:current-page="pageNum"
                    v-model:page-size="pageSize"
                    :page-sizes="[2, 3, 5, 8]"
                    :size="'default'"
                    :disabled="false"
                    :background="false"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
import request from "@/utils/request";
import {ElMessage} from "element-plus";

export default {
    name: 'HomeView',
    components: {},
    data() {            // 数据池
        return {
            form: {          // 表单数据
            },
            dialogVisible: false,    // 是否显示对话框，默认关闭
            search: '',             // 搜索框数据
            tableData: [      // 列表用于展示数据

            ],
            dialogTitle: "tip",  // 默认表单名
            pageNum: 1,      // 默认第一页
            pageSize: 5,     // 默认每一页5条记录
            pageTotal: 100,  // 默认总页数
            rules: {
                name: [
                    {required: true, message: '请输入家居名', trigger: 'blur'}
                ],
                maker: [
                    {required: true, message: '请输入生产商', trigger: 'blur'}
                ],
                price: [
                    {required: true, message: '请输入价格', trigger: 'blur'},
                    {pattern: /^([1-9]\d*|0)(\.\d+)?$/, message: '请输入数字', trigger: 'blur'}
                ],
                sales: [
                    {required: true, message: '请输入销量', trigger: 'blur'},
                    {pattern: /^([1-9]\d*|0)$/, message: '请输入数字', trigger: 'blur'}
                ],
                stock: [
                    {required: true, message: '请输入销量', trigger: 'blur'},
                    {pattern: /^([1-9]\d*|0)$/, message: '请输入数字', trigger: 'blur'}
                ]
            },
            errors: {}           // 存储后端拿来的错误信息
        }
    },
    methods: {           // 方法池
        submit() {  // 增加/更新 家居的表单
            if (this.form.id) {       // 该行有id 证明是更新操作
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        request.put("/api/update", this.form).then(data => {
                            console.log("后端拿来的数据:", data);
                            if(data.data.code === 200) {
                                // 将下面这两句用于显示最新信息的代码放在回调函数中，避免异步操作无法显示最新更新数据
                                this.list();        // 修改家居后立即调用一次list()方法，用于更新最新列表
                                this.dialogVisible = false;       // 提交完表单后关闭对话框
                                this.form = {};      // 关闭对话框后将表单清空，避免新增时复现该数据
                                ElMessage({
                                    message: '更新家居成功',
                                    type: 'success',
                                })
                            }else if(data.data.code === 400){
                                this.errors = data.data.extend.errorMes;   // 拿到后端校验的错误信息
                                console.log(this.errors);
                                ElMessage({
                                    message: '后端验证不通过',
                                    type: 'error',
                                })
                            }
                        }).catch(err => {
                            console.log("错误信息:", err);
                            ElMessage.primary('更新家居失败')
                        });
                    } else {
                        ElMessage({
                            message: '验证不通过，请重新输入家居信息',
                            type: 'error',
                        })
                    }
                })
            } else {            // 否则为增加操作
                this.$refs['form'].validate(valid => {
                    // valid = true;       // 测试后端验证
                    if (valid) {      // 前端验证成功
                        // axios发送ajax请求
                        request.post("/api/save", this.form).then(data => {
                            console.log("从后端得来的数据:", data);
                            console.log(data.data.code);
                            if (data.data.code === 400) {     // 后端验证不通过
                                this.errors = data.data.extend.errorMes;   // 拿到后端校验的错误信息
                                console.log(this.errors);
                                ElMessage({
                                    message: '后端验证不通过',
                                    type: 'error',
                                })
                            } else if (data.data.code === 200) {     // 后端验证通过
                                // 将下面这两句用于显示最新信息的代码放在回调函数中，避免异步操作无法显示最新更新数据
                                this.list();        // 增加家居后立即调用一次list()方法，用于更新最新列表
                                this.dialogVisible = false;       // 提交完表单后关闭对话框
                                this.form = {};      // 关闭对话框后将表单清空，避免新增时复现该数据
                                ElMessage({
                                    message: '新增家居成功',
                                    type: 'success',
                                })
                            }
                        }).catch(err => {
                            console.log("错误信息:", err);
                            ElMessage.primary('新增家居失败')
                        })
                    } else {
                        ElMessage({
                            message: '验证不通过，请重新输入家居信息',
                            type: 'error',
                        })
                    }
                })
            }
        }
        ,
        list() {     // 获取所有家居信息
            request.get("/api/listByConditionPage", {
                params: {
                    "pageNum": this.pageNum,
                    "pageSize": this.pageSize,
                    "search": this.search
                }
            }).then(result => {
                this.tableData = result.data.extend.pageInfo.list;  // 将获取到的数据挂载到列表中进行展示
                this.pageTotal = result.data.extend.pageInfo.total;
            })
        }
        ,
        reShow(row) {       // 更新家居时回显表单
            this.dialogTitle = "修改家居";
            this.form = JSON.parse(JSON.stringify(row));
            this.errors = {};
            this.dialogVisible = true;
        }
        ,
        add() {          // 增加家居
            this.dialogTitle = "增加家居";
            this.form = {};
            this.errors = {};
            this.dialogVisible = true;
        }
        ,
        del(id) {       // 删除家居
            request.delete("/api/delete/" + id).then(res => {
                this.list();
            })
        }
        ,
        handleCurrentChange() {  // 页码变化时执行
            this.list();
        }
        ,
        handleSizeChange() {

            this.list();
        }
    }
    ,
    created() {                 // 在钩子函数created中自动调用显示所有家居信息的方法
        this.list();
    }
    ,
}
</script>
